:root {
  --black: #333333;
  --white: #f5f5f5;
  --background: var(--white);
  --foreground: var(--black);
}
:root.dark {
  --background: var(--black);
  --foreground: var(--white);
}
html {
  background: var(--background);
  color: var(--foreground);
}
html,
body {
  height: 100%;
}
.toggle {
  position: absolute;
  cursor: pointer;
  top: 20px;
  right: 25px;
  font-size: 150%;
}

.toggle:before {
  content: "☀️";
}

.toggle.active:before {
  content: "🌒";
}
.toggle.animate {
  animation: animate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes animate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.text {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/**
 Animated Theme Toggle
 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

.dark::view-transition-old(root) {
  z-index: 1;
}
.dark::view-transition-new(root) {
  z-index: 999;
}

::view-transition-old(root) {
  z-index: 999;
}
::view-transition-new(root) {
  z-index: 1;
}
